<script setup>
    // 编程式导航
    import { useRouter } from "vue-router";

    const router = useRouter()

    const gotoContent = ()=> {
        // router.push 对应的就是 router-link 的 to 属性，使用动态属性绑定的参数即可。
        // router.push("/content?id=1005&title=laoda")
        router.push({name: 'member', params: {id:1005, name: 'laoda'}})
    }
</script>

<template>
    <h1>首页</h1>

    <router-link to="/content?id=1005&title=laoda">查询字符串</router-link>
    <br />
    <router-link to="/user/007/name/laoda">路径参数</router-link>
    <br />
    <router-link :to="{path: '/content', query: {id:1005, title: 'laoda'}}">查询字符串-动态属性绑定</router-link>
    <br />
    <router-link :to="{name: 'member', params: {id:1005, name: 'laoda'}}">查询字符串-动态属性绑定</router-link>
    <br />

    <button @click="gotoContent">编程式导航-查询字符串</button>
</template>

<style lang="scss" scoped>

</style>